<template>
    <div
        class="noticecontainer"
        v-loading="pageLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <!-- 公告管理 -->
        <div class="noticemanageMentMain">
            <el-row>
                <el-col :span="24">
                    <el-form
                        :inline="true"
                        :model="formData"
                        class="demo-form-inline formData_form_inline"
                        size="small"
                    >
                        <el-form-item label="公告标题">
                            <el-input v-model="formData.noticeTitle" placeholder="请输入公告标题"></el-input>
                        </el-form-item>
                        <el-form-item label="公告内容">
                            <el-input v-model="formData.noticeContent" placeholder="请输入公告内容"></el-input>
                        </el-form-item>
                        <el-button
                            type="primary"
                            size="small"
                            icon="el-icon-search"
                            @click="hanlesearch"
                            :loading="searchLoading"
                            class="searchBtn"
                        >查询</el-button>
                        <el-button
                            type="primary"
                            size="small"
                            icon="el-icon-refresh-right"
                            @click="handleReset"
                            :loading="resetLoading"
                            class="resetBtn"
                        >重置</el-button>
                    </el-form>
                    <div style="margin-bottom: 16px;">
                        <el-button
                            type="primary"
                            size="small"
                            icon="el-icon-circle-plus-outline"
                            @click="hanlePush"
                        >新增</el-button>
                    </div>
                    <el-table
                        :data="tableData"
                        width="100%"
                        border
                        highlight-current-row
                        stripe
                        class="heard-bg"
                    >
                        <el-table-column label="公告标题" prop="noticeTitle" width="350"></el-table-column>
                        <el-table-column label="公告内容" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <span>{{scope.row.noticeContent | filterValue}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="状态" width="180">
                            <template slot-scope="scope">
                                <span v-if="!scope.row.publishStatus">未发布</span>
                                <span v-else-if="scope.row.publishStatus === '1'">已发布</span>
                                <span v-else-if="scope.row.publishStatus === '2'">已下线</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="发布时间" prop="publishTime" width></el-table-column>
                        <el-table-column label="失效时间" prop="inEffectTime" width></el-table-column>
                        <el-table-column label="操作" width="300">
                            <template slot-scope="scope">
                                <el-button
                                    type="primary"
                                    icon="el-icon-edit"
                                    :disabled="(scope.row.publishStatus !== '0') && (scope.row.publishStatus !== null)"
                                    title="编辑"
                                    circle
                                    @click="handleEdit(scope.row)"
                                />
                                <el-button
                                    type="primary"
                                    icon="el-icon-document-checked"
                                    :disabled="(scope.row.publishStatus !== '0') && (scope.row.publishStatus !== null)"
                                    title="发布"
                                    circle
                                    @click="handlePublish(scope.row)"
                                />
                                <el-button
                                    type="danger"
                                    icon="el-icon-delete"
                                    title="删除"
                                    circle
                                    @click="handleDelete(scope.row)"
                                />
                                <el-radio-group
                                    v-model="scope.row.inEffect"
                                    @change="handleClickIneffectFun($event,scope.row)"
                                >
                                    <el-radio label="1" value="1" border size="mini">失效</el-radio>
                                    <el-radio label="0" value="0" border size="mini">生效</el-radio>
                                </el-radio-group>
                                <!-- <el-switch
                                    v-model="scope.row.inEffect"
                                    active-text="生效"
                                    inactive-text="失效"
                                    @change="handleClickIneffectFun($event,scope.row)"
                                ></el-switch>-->
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页 -->
                    <div class="pagination">
                        <Pagination
                            :hanleChangeCurrentPage="hanleChangeCurrentPage"
                            :handleChangeSize="handleChangeSize"
                            :currentPage="currentPage"
                            :pageSize="pageSize"
                            :total="total"
                        />
                    </div>
                </el-col>
            </el-row>
        </div>
        <!--添加/编辑公告-->
        <el-dialog
            v-drag
            :visible.sync="Show"
            :close-on-click-modal="false"
            append-to-body
            center
            width="800px"
        >
            <div slot="title">{{EditTitle}}</div>
            <el-form
                :model="Edit"
                label-position="right"
                ref="Edit"
                label-width="110px"
                :rules="formRules"
                size="small"
            >
                <el-form-item label="公告标题" prop="noticeTitle">
                    <el-input v-model="Edit.noticeTitle" placeholder="请输入" style="width: 90%;" />
                </el-form-item>
                <el-form-item label="公告内容" prop="noticeContent" style="margin-bottom:10px;">
                    <quill-editor
                        ref="myQuillEditor"
                        class="editor"
                        @change="onEditChang($event)"
                        :options="editorOption"
                        v-model="Edit.noticeContent"
                        style="width: 90%;"
                    ></quill-editor>
                </el-form-item>
            </el-form>
            <div class="pageLength">{{pageLength}} / 1000</div>
            <div slot="footer" class="dialog-footer">
                <el-button
                    size="small"
                    icon="el-icon-circle-close"
                    @click="Show = false"
                    class="cancelBtn"
                >取 消</el-button>
                <el-button
                    type="primary"
                    size="small"
                    @click="submitEdit"
                    class="submitBtn"
                    icon="el-icon-circle-check"
                >确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import * as Quill from 'quill'; // 引入编辑器
import Pagination from '@/components/Pagination/Pagination.vue';
// import { quillEditor } from 'vue-quill-editor'

// quill编辑器的字体
const fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'Times-New-Roman', 'sans-serif'];
const Font = Quill.import('formats/font');
Font.whitelist = fonts; // 将字体加入到白名单
Quill.register(Font, true);

// quill编辑器的文字大小
const sizeC = ['12', '14', '16', '18', '20', '24', '28', '32', '36'];
const sizeS = ['12px', '16px', '18px', '20px', '24px', '28px', '32px', '36px', '48px'];
const Size = Quill.import('formats/size');
console.log(Size);
Size.whitelist = sizeC; // 将字体加入
// Size.SizeStyle.whitelist = sizeS; //将字体加入
Quill.register(Size, true);

export default {
    name: 'noticeManagement',
    components: {
        Pagination,
    },
    data() {
        return {
            defaultProps: {
                parent: 'pid',
                value: 'id',
                label: 'deptName',
                children: 'child',
            },
            formData: {
                noticeTitle: '',
                noticeContent: '',
            },
            pageLength: 0,
            // 新增公告字段
            Edit: {
                noticeTitle: null,
                noticeContent: null,
            },
            editorOption: { // 富文本编辑器的配置
                theme: 'snow',
                placeholder: '请输入公告内容',
                modules: {
                    toolbar: [
                        ['bold', 'italic', 'underline', 'strike', { color: [] }, { background: [] }, { align: [] }, { font: fonts }, { size: sizeC }, { list: 'ordered' }, { list: 'bullet' }, { script: 'sub' }, { script: 'super' }, { indent: '+1' }, 'clean'], // 加粗, 斜体, 下划线, 删除线
                    ],
                },
            },
            EditTitle: '',
            sendTitle: '',
            Show: false,
            sendShow: false,
            pageLoading: true,
            // 搜索loading
            searchLoading: false,
            // 重置loading
            resetLoading: false,
            formRules: {
                noticeTitle: [
                    { required: true, message: '请输入公告标题', trigger: 'blur' },
                ],
                noticeContent: [
                    { required: true, message: '请输入公告内容', trigger: 'blur' },
                ],
            },
            // 当前页码
            currentPage: 1,
            // 页码大小
            pageSize: 10,
            // 总数
            total: 0,
            // 当前页码
            currentPageDetail: 1,
            // 页码大小
            pageSizeDetail: 10,
            // 总数
            totalDetail: 0,
            // 表格内容
            tableData: [],
            // 表格内容
            departList: [],
            // userDataList: [],
            rowObj: {},
            selections: [],
            id: '',
            deptId: [],
        };
    },
    mounted() {
        this.getInitData(this.formData);
    },
    filters: {
        filterValue(val) {
            return val.replace(/<[^>]+>/g, '');
        },
    },
    methods: {
        // 获取公告数据
        getInitData(form) {
            let params = {
                pageNum: this.currentPage,
                pageSize: this.pageSize,
            };
            params = Object.assign({}, params, form);
            this.$post.noticeMangage.searchByNotice(params)
                .then((res) => {
                    if (res.data.success) {
                        this.pageLoading = false;
                        this.tableData = res.data.content.recordList;
                        this.total = res.data.content.recordCount;
                    }
                });
        },
        // 点击搜索
        hanlesearch() {
            this.currentPage = 1;
            this.pageSize = 10;
            this.getInitData(this.formData);
        },
        // 
        handleClickIneffectFun(value, row) {
            console.log('单选按钮的值1', value);
            console.log('单选按钮的值2', row);
            // let rowObj = row;
            // value = value ? '1' : '0'
            // rowObj.inEffect = value
            this.$post.noticeMangage.updateNotice(row)
                .then((res) => {
                    if (res.data.success) {
                        this.$message.success('修改成功！');
                        this.getInitData(this.formData);
                        this.Show = false;
                    } else {
                        this.$message.error(res.data.msg);
                    }
                });
            // this.$confirm('是否保存当前修改', '操作提示', {
            //     confirmButtonText: '确认',
            //     cancelButtonText: '取消',
            //     type: 'warning',
            // }).then(() => {
            //     this.$post.noticeMangage.updateNotice(rowObj)
            //         .then((res) => {
            //             if (res.data.success) {
            //                 this.$message.success('修改成功！');
            //                 this.getInitData(this.formData);
            //                 this.Show = false;
            //             } else {
            //                 this.$message.error(res.data.msg);
            //             }
            //         });
            // }).catch(() => {
            //     value = value === '1' ? '0' : '1'
            // })

        },
        // 点击重置
        handleReset() {
            this.formData = {
                noticeTitle: '',
                noticeContent: '',
            };
            this.currentPage = 1;
            this.pageSize = 10;
            this.getInitData(this.formData);
        },
        // 点击新增
        hanlePush() {
            // 解决一进来就进行表单验证问题
            this.EditTitle = '添加公告';
            this.Edit = {
                noticeTitle: null,
                noticeContent: null,
            };
            this.pageLength = 0;
            this.Show = true;
            // 解决一进来就进行表单验证问题
            if (this.$refs.Edit) {
                this.$refs.Edit.resetFields();
            } else {
                this.$nextTick(() => {
                    // this.$refs.Edit.resetFields();
                });
            }
        },
        // 点击编辑
        handleEdit(row) {
            this.EditTitle = '编辑公告';
            this.Edit = JSON.parse(JSON.stringify(row));
            this.Show = true;
            // 解决一进来就进行表单验证问题
            if (this.$refs.Edit) {
                this.$refs.Edit.resetFields();
            } else {
                this.$nextTick(() => {
                    // this.$refs.Edit.resetFields();
                });
            }
        },
        // 发布公告
        async handlePublish(row) {
            // this.sendShow = true;
            // this.sendTitle = '发布公告选择机构';
            this.id = row.id;
            this.deptId = [];
            // await this.getDepartList();
            // console.log('获取机构下拉选数据', this.departList);
            this.submitSend(this.departList)
        },
        // 发送公告确定
        submitSend(data) {
            // if (this.deptId.length === 0) {
            //     this.$message.warning('请选择需要发送的机构！');
            //     return;
            // }
            this.$confirm('确认发布？', '温馨提示', {
                customClass: 'warning', type: 'warning',
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(() => {
                this.$post.noticeMangage.sendDeptUserNotice({ id: this.id })
                    .then((res) => {
                        if (res.data.success) {
                            this.$message.success('发布成功！');
                            this.getInitData(this.formData);
                            this.sendShow = false;
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    });
            }).catch(() => {
            });
        },
        // 获取机构
        async getDepartList() {
            this.$post.departManage.searchByDept({}).then((res) => {
                if (res.data.success) {
                    console.log('获取机构下拉选数据——————————————————', this.departList);
                    this.departList = res.data.content;
                    // this.userDataList = [];/
                    // this.totalDetail = 0;
                }
            }, (err) => {
                this.$message.error(err);
            });
            this.currentPageDetail = 1;
        },
        // // 点击机构
        handleNodeClick(data) {
            console.log("输出点击机构获取到的数据", data);
            this.deptId = data
            // if (data.child.length > 0) {
            //     this.getNodeClickIdFun(data.child);
            // }

        },
        // //获取当前选中的所有数据的id 
        // getNodeClickIdFun(data) {
        //     // let dataId = [];
        //     data.forEach(element => {
        //         this.deptId.push(element.id)
        //         if (element.child.length > 0) {
        //             this.getNodeClickIdFun(element.child);
        //         }
        //     });
        //     // console.log('输出id————————', this.deptId);
        // },
        // // 获取机构下的用户
        // getUserList(data) {
        //     this.deptId = [data.id];
        //     const params = {
        //         pageNum: this.currentPageDetail,
        //         pageSize: this.pageSizeDetail,
        //         deptId: data.id,
        //     };
        //     this.$post.userManage.selectUserByDept(params)
        //         .then((res) => {
        //             if (res.data.success) {
        //                 this.userDataList = res.data.content.userList;
        //                 this.totalDetail = res.data.content.userCount;
        //             }
        //         });
        //     this.currentPageDetail = 1;
        // },
        // 页码切换方法
        // hanleChangeCurrentPageDetail(val) {
        //     this.currentPageDetail = val;
        //     this.getDepartList();
        // },
        // // 切换分页大小方法
        // handleChangeSizeDetail(val) {
        //     this.pageSizeDetail = val;
        //     this.getDepartList();
        // },
        // 单个删除公告
        handleDelete(row) {
            this.$confirm('确认删除该公告？', '提示', { customClass: 'warning', type: 'warning' })
                .then(() => {
                    this.$post.noticeMangage.deleteNotice({ id: row.id })
                        .then((res) => {
                            if (res.data.success) {
                                this.$message.success('删除成功！');
                                if (this.tableData.length === 1) {
                                    this.currentPage = this.currentPage - 1;
                                }
                                this.getInitData(this.formData);
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        });
                })
                .catch(() => {
                });
        },
        onEditChang(e) {
            e.quill.deleteText(1000, 1);
            if (this.Edit.noticeContent === 0) {
                this.pageLength = 0;
            } else {
                this.pageLength = e.quill.getLength() - 1;
            }
        },
        // 新增公告点击确定按钮
        submitEdit() {
            console.log(this.Edit);
            if (this.Edit.id) {
                // 编辑
                this.$refs.Edit.validate((valid) => {
                    console.log(valid);
                    if (valid) {
                        this.$post.noticeMangage.updateNotice(this.Edit)
                            .then((res) => {
                                if (res.data.success) {
                                    this.$message.success('修改成功！');
                                    this.getInitData(this.formData);
                                    this.Show = false;
                                } else {
                                    this.$message.error(res.data.msg);
                                }
                            });
                    } else {
                        this.$message.warning('请完成表单填写！');
                    }
                });
            } else {
                // 添加
                this.$refs.Edit.validate((valid) => {
                    console.log(valid);
                    if (valid) {
                        this.$post.noticeMangage.addNotice(this.Edit)
                            .then((res) => {
                                if (res.data.success) {
                                    this.$message.success('添加成功！');
                                    this.getInitData(this.formData);
                                    this.Show = false;
                                } else {
                                    this.$message.error(res.data.msg);
                                }
                            });
                    } else {
                        this.$message.warning('请完成表单填写！');
                    }
                });
            }
        },
        // 页码切换方法
        hanleChangeCurrentPage(val) {
            this.currentPage = val;
            this.getInitData(this.formData);
        },
        // 切换分页大小方法
        handleChangeSize(val) {
            this.pageSize = val;
            this.getInitData(this.formData);
        },
    },
};
</script>

<style  lang="scss">
.editor .ql-container {
    height: 280px;
}
.noticecontainer {
    width: 100%;
    height: 100%;
    #grid-content /deep/ .side-bar-scrollbar-wrap {
        max-height: 500px;
        min-height: 200px;
    }
    .rolemanageMentHeader {
        height: 68px;
        background: #fff;
        border-radius: 5px;
        text-align: left;
        font-size: 14px;
        line-height: 68px;
        padding: 0 12px;
        .el-form--inline .el-form-item__content {
            vertical-align: middle;
        }
        .el-button {
            i {
                font-weight: bolder;
                text-align: left;
                font-size: 16px;
                margin-left: -6px;
            }
        }
    }

    .noticemanageMentMain {
        width: 100%;
        background: #fff;
        margin: 0 0 15px;
        // border-radius:5px;
        padding: 20px;
        box-sizing: border-box;
        text-align: left;
        .tableTitle {
            width: 100%;
            height: 48px;
            border: 1px solid #eee;
            border-bottom: none;
            line-height: 48px;
            margin-top: 20px;
            color: #666;
        }
        .pagination {
            margin-top: 20px;
            text-align: right;
        }
        .el-tree--highlight-current
            .el-tree-node.is-current
            > .el-tree-node__content {
            background-color: #c7dbf3;
        }
        .el-tree-node__content:hover {
            background-color: #c7dbf3 !important;
        }
        .cell > .el-radio-group {
            margin-left: 10px;
            .el-radio {
                margin-right: 0;
            }
        }
    }
}
</style>
